<template>
  <view>
    <view class="header">
      <text class="header-title" @click="addPlan">新增</text>
    </view>
    <scroll-view scroll-y="true" :style="{height: windowHeight + 'px'}" v-if="planList.length > 0">
      <uni-swipe-action>
        <view class="plan-list" v-for="(item, i) in planList" :key="i">
          <uni-swipe-action-item :right-options="options" @click="deletePlan(i)">
            <view class="plan-item" @click="modifyPlan(item, i)">
              <text class="plan-content">{{item.content}}</text>
              <text class="plan-date" v-if="currentDate !== item.date">{{item.date}}</text>
              <text class="plan-date" v-else>{{item.dateTime}}</text>
              <uni-icons class="plan-icon" type="forward" size="20" color="#ccc"></uni-icons>
            </view>
          </uni-swipe-action-item>
        </view>
      </uni-swipe-action>
    </scroll-view>
    <view class="footer" v-else>
      <view class="prompt">你还没有运动计划哦~</view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // 系统窗口高度
        windowHeight: 0,
        // 今天的日期
        currentDate: '',
        // 右滑删除控件
        options: [{
          text: '删除',
          style: {
            backgroundColor: 'orangered'
          },
        }]
      };
    },
    computed: {
      ...mapState('m_user', ['planList'])
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 windowHeight 窗口可用高度动态赋值
      this.windowHeight = sysInfo.windowHeight - 80
      // 获取当前日期
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1;
      const date = currentDate.getDate();
      const hours = currentDate.getHours();
      const minutes = currentDate.getMinutes();
      const formattedDate = `${year}年${month}月${date}日`
      this.currentDate = formattedDate
    },
    methods: {
      ...mapMutations('m_user', ['updateUserPlanList']),
      // 新增计划事件
      addPlan() {
        uni.navigateTo({
          url: '../../subpkg/plan_write/plan_write'
        })
      },
      // 修改计划事件
      modifyPlan(plan, index) {
        uni.navigateTo({
          url: `../../subpkg/plan_write/plan_write?plan=${encodeURIComponent(JSON.stringify(plan))}&index=${index}`,
        })
      },
      // 右滑删除计划事件
      async deletePlan(index) {
        // 准备参数
        var token = uni.getStorageSync('token')
        const query = {
          token,
          planIndex: index,
        };
        const {
          data: res
        } = await uni.$http.post('/api/delete/plan', query)
        if (res.meta.status !== 200) return uni.$showMsg('删除计划失败')
        this.updateUserPlanList(res.message)
      }
    }
  }
</script>

<style lang="scss">
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .header {
    height: 60rpx;
    padding: 20rpx;
    position: sticky;
    top: 0;
    z-index: 999;

    .header-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #fba007;
      float: right;
    }
  }

  .plan-list {
    // background: linear-gradient(to bottom right, #fffffa, #fff4e0, #fff6f6);
    position: relative;

    // border: 1px solid red;
    // margin-top: 20rpx;
    .plan-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      line-height: 80rpx;
      margin-left: 30rpx;
      padding-left: 5rpx;
      padding-bottom: 5rpx;
      // background-color: #fff;
      border-bottom: 1rpx solid #ddd;
      // border: 1px solid red;
    }

    .plan-content {
      // flex: 1;
      width: 295rpx;
      font-size: 34rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      // font-weight: bold;
      // border: 1px solid red;
    }

    .plan-date {
      position: absolute;
      right: 100rpx;
      flex: 1;
      font-size: 34rpx;
      // color: #ccc;
      // border: 1px solid red;
    }

    .plan-icon {
      // position: absolute;
      margin-right: 20rpx;
      margin-top: 7rpx;
    }
  }

  .footer {
    position: relative;
    height: 100vh;

    .prompt {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%);
      color: #ccc;
      font-size: 34rpx;
    }
  }
</style>